<template>
  <div class="backstage-container">
    <el-page-header @back="$router.go(-1)" content="系统后台管理" />

    <ul :class="['reset-list', 'content-list-wrapper', 'flex', 'content-main', componentsId]">
      <li
        v-for="(item, index) in operationBtn"
        :key="index"
        :class="['management-item', 'pointer', {'theme-bg': componentsId === item.field}]"
        @click="componentsId = item.field"
      >{{item.name}}</li>
    </ul>

    <div class="components-view">
      <keep-alive>
        <component :is="componentsId" :login-user="loginUser"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie';
export default {
  name: 'backstagePage',
  head() {
    return {
      title: '后台管理 - [rabbit-pie]'
    }
  },

  beforeRouteEnter: (to, from, next) => {
    next(_self => {
      // 如果用户没有登录则直接退出
      _self.$utils.userType().then(data => {
        // 如果用户的身份是普通用户则退出
        if (data.scope !== 'USER') {
          _self.loginUser = data;
        } else {
          _self.$router.back();
        }
      }).catch(err => {
        _self.$router.back();
      });
    });
  },

  components: {
    UserList: () => import('~/components/user/backstage/UserList'),
    WordTags: () => import('~/components/user/backstage/WordTags'),
  },

  data() {
    return {
      componentsId: 'word-tags',
      operationBtn: [{
        name: '用户管理',
        field: 'user-list',
        actived: false
      }, {
        name: '标签分类管理',
        field: 'word-tags',
        actived: false
      }],
      loginUser: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.content-list-wrapper {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);

  .management-item {
    padding: 5px 10px;
    margin-right: 10px;
    border: 1px solid var(--border);
  }
}

.components-view {
  height: 600px;
  background-color: #fff;

  /deep/ .el-table td {
    padding: 10px 0 9px;
  }

  /deep/ .el-table th {
    padding: 2px 0 3px;
  }
}
</style>